<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
      rel="stylesheet"
    />

    <style>
      body {
        font-family: 'Arial';
      }

      table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
      }

      th,
      td {
        border: 1px solid black;
        padding: 10px;
        text-align: center;
        vertical-align: middle;
      }

      .separator {
        height: 20px;
        background-color: #f0f0f0;
      }

      .vertical-header {
        text-align: center;
      }

      .collapsible {
        background-color: #f9f9f9;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
      }

      .active,
      .collapsible:hover {
        background-color: #ccc;
      }

      .collapsible:after {
        content: '\002B';
        color: #777;
        font-weight: bold;
        float: right;
        margin-left: 2px;
      }

      .active:after {
        content: '\2212';
      }

      .content {
        padding: 0 5px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #f1f1f1;
      }

      .content .pre-scrollable {
        max-height: 200px;
        overflow-y: scroll;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th></th>
        <!-- Placeholder for the top left corner -->
        <th>Dagre</th>
        <th>Dagre with rough</th>
        <th>ELK</th>
        <th>ELK with rough</th>
      </tr>
      <tr>
        <th class="vertical-header">
          <button class="collapsible">Stadium shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart LR
              id1([This is the text in the box])
            </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram1" class="mermaid">
flowchart LR
    id1([This is the text in the box])

      </pre
          >
        </td>
        <td>
          <pre id="diagram2" class="mermaid">
%%{init: {"look": "handDrawn"} }%%
flowchart LR
    id1([This is the text in the box])
      </pre
          >
        </td>
        <td>
          <pre id="diagram3" class="mermaid">
%%{init: {"handDrawn": false, "layout": "elk"} }%%
flowchart LR
    id1([This is the text in the box])
      </pre
          >
        </td>
        <td>
          <pre id="diagram4" class="mermaid">
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
flowchart LR
    id1([This is the text in the box])
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Sub-Routine shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
      flowchart LR
    id1[[This is the text in the box]]
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram5" class="mermaid">
flowchart LR
    id1[[This is the text in the box]]
      </pre
          >
        </td>
        <td>
          <pre id="diagram6" class="mermaid">
%%{init: {"look": "handDrawn"} }%%
flowchart LR
    id1[[This is the text in the box]]
      </pre
          >
        </td>
        <td>
          <pre id="diagram7" class="mermaid">
%%{init: {"handDrawn": false, "layout": "elk"} }%%
flowchart LR
    id1[[This is the text in the box]]
      </pre
          >
        </td>
        <td>
          <pre id="diagram8" class="mermaid">
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
flowchart LR
    id1[[This is the text in the box]]
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Cylindrical shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart LR
    id1[(Database)]
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram9" class="mermaid">
          flowchart LR
    id1[(Database)]
      </pre
          >
        </td>
        <td>
          <pre id="diagram10" class="mermaid">
          %%{init: {"look": "handDrawn"} }%%
          flowchart LR
    id1[(Database)]
      </pre
          >
        </td>
        <td>
          <pre id="diagram11" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart LR
    id1[(Database)]
      </pre
          >
        </td>
        <td>
          <pre id="diagram12" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart LR
    id1[(Database)]
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Circle shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart LR
    id1((This is the text in the circle))
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram13" class="mermaid">
          flowchart LR
    id1((This is the text in the circle))
      </pre
          >
        </td>
        <td>
          <pre id="diagram14" class="mermaid">
          %%{init: {"look": "handDrawn"} }%%
          flowchart LR
    id1((This is the text in the circle))
      </pre
          >
        </td>
        <td>
          <pre id="diagram15" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart LR
    id1((This is the text in the circle))
      </pre
          >
        </td>
        <td>
          <pre id="diagram16" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart LR
    id1((This is the text in the circle))
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Double Circle shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart TD
    id1(((This is the text in the circle)))
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram17" class="mermaid">
          flowchart TD
    id1(((This is the text in the circle)))
      </pre
          >
        </td>
        <td>
          <pre id="diagram18" class="mermaid">
          %%{init: {"look": "handDrawn"} }%%
          flowchart TD
    id1(((This is the text in the circle)))
      </pre
          >
        </td>
        <td>
          <pre id="diagram19" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart TD
    id1(((This is the text in the circle)))
      </pre
          >
        </td>
        <td>
          <pre id="diagram20" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart TD
    id1(((This is the text in the circle)))
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Asymmetric shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart LR
    id1>This is the text in the box]
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram21" class="mermaid">
          flowchart LR
    id1>This is the text in the box]
      </pre
          >
        </td>
        <td>
          <pre id="diagram22" class="mermaid">
          %%{init: {"look": "handDrawn"} }%%
          flowchart LR
    id1>This is the text in the box]  
      </pre
          >
        </td>
        <td>
          <pre id="diagram23" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart LR
    id1>This is the text in the box]  
      </pre
          >
        </td>
        <td>
          <pre id="diagram24" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart LR
    id1>This is the text in the box]
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Rhombus/Diamond/Question shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart LR
    id1{This is the text in the box}
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram25" class="mermaid">
          flowchart LR
    id1{This is the text in the box}
      </pre
          >
        </td>
        <td>
          <pre id="diagram26" class="mermaid">
          %%{init: {"look": "handDrawn"} }%%
          flowchart LR
    id1{This is the text in the box}
      </pre
          >
        </td>
        <td>
          <pre id="diagram27" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart LR
    id1{This is the text in the box}
      </pre
          >
        </td>
        <td>
          <pre id="diagram28" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart LR
    id1{This is the text in the box}
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Hexagon shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart LR
    id1{{This is the text in the box}}
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram29" class="mermaid">
          flowchart LR
    id1{{This is the text in the box}}
      </pre
          >
        </td>
        <td>
          <pre id="diagram31" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart LR
    id1{{This is the text in the box}}
      </pre
          >
        </td>
        <td>
          <pre id="diagram32" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart LR
    id1{{This is the text in the box}}
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Parallelogram shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart TD
    id1[/This is the text in the box/]
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram33" class="mermaid">
          flowchart TD
    id1[/This is the text in the box/]
      </pre
          >
        </td>
        <td>
          <pre id="diagram34" class="mermaid">
          %%{init: {"look": "handDrawn"} }%%
          flowchart TD
    id1[/This is the text in the box/]  
      </pre
          >
        </td>
        <td>
          <pre id="diagram35" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart TD
    id1[/This is the text in the box/] 
      </pre
          >
        </td>
        <td>
          <pre id="diagram36" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart TD
    id1[/This is the text in the box/]
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Parallelogram Alt shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart TD
    id1[\This is the text in the box\]
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram37" class="mermaid">
          flowchart TD
    id1[\This is the text in the box\]
      </pre
          >
        </td>
        <td>
          <pre id="diagram38" class="mermaid">
          %%{init: {"look": "handDrawn"} }%%
          flowchart TD
    id1[\This is the text in the box\]
      </pre
          >
        </td>
        <td>
          <pre id="diagram39" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart TD
    id1[\This is the text in the box\]
      </pre
          >
        </td>
        <td>
          <pre id="diagram40" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart TD
    id1[\This is the text in the box\]

      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Trapezoid shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart TD
    A[/Christmas\]
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram41" class="mermaid">
          flowchart TD
    A[/Christmas\]
      </pre
          >
        </td>
        <td>
          <pre id="diagram42" class="mermaid">
          %%{init: {"look": "handDrawn"} }%%
          flowchart TD
    A[/Christmas\]
      </pre
          >
        </td>
        <td>
          <pre id="diagram43" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart TD
    A[/Christmas\]
      </pre
          >
        </td>
        <td>
          <pre id="diagram44" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart TD
    A[/Christmas\]
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Trapezoid Alt shape</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart TD
    A[\Christmas/]
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram45" class="mermaid">
          flowchart TD
    A[\Christmas/]
      </pre
          >
        </td>
        <td>
          <pre id="diagram46" class="mermaid">
          %%{init: {"look": "handDrawn"} }%%
          flowchart TD
    A[\Christmas/]
      </pre
          >
        </td>
        <td>
          <pre id="diagram47" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart TD
    A[\Christmas/]
      </pre
          >
        </td>
        <td>
          <pre id="diagram48" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart TD
    A[\Christmas/]  
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Rect with rounded corner</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart LR
    id1(This is the text in the box)
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram49" class="mermaid">
          flowchart LR
    id1(This is the text in the box)
      </pre
          >
        </td>
        <td>
          <pre id="diagram50" class="mermaid">
          %%{init: {"look": "handDrawn"} }%%
          flowchart LR
    id1(This is the text in the box)
      </pre
          >
        </td>
        <td>
          <pre id="diagram51" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart LR
    id1(This is the text in the box)
      </pre
          >
        </td>
        <td>
          <pre id="diagram52" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart LR
    id1(This is the text in the box) 
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>

      <tr>
        <th class="vertical-header">
          <button class="collapsible">Rect with sharp corner</button>
          <div class="content">
            <div class="pre-scrollable">
              <pre>
              flowchart LR
    id1[This is the text in the box]
    </pre
              >
            </div>
          </div>
        </th>
        <td>
          <pre id="diagram53" class="mermaid">
          flowchart LR
    id1[This is the text in the box]
      </pre
          >
        </td>
        <td>
          <pre id="diagram54" class="mermaid">
          %%{init: {"look": "handDrawn"} }%%
          flowchart LR
    id1[This is the text in the box]
      </pre
          >
        </td>
        <td>
          <pre id="diagram55" class="mermaid">
          %%{init: {"handDrawn": false, "layout": "elk"} }%%
          flowchart LR
    id1[This is the text in the box]
      </pre
          >
        </td>
        <td>
          <pre id="diagram56" class="mermaid">
          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
          flowchart LR
    id1[This is the text in the box]
      </pre
          >
        </td>
      </tr>
      <!-- Separator row -->
      <tr class="separator">
        <td colspan="5"></td>
        <!-- This cell spans all columns including the vertical header -->
      </tr>
    </table>

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      import layouts from './mermaid-layout-elk.esm.mjs';
      mermaid.registerLayoutLoaders(layouts);
      mermaid.parseError = function (err, hash) {};

      mermaid.initialize({
        handDrawn: false,
        mergeEdges: true,
        layout: 'dagre',
        flowchart: { titleTopMargin: 10 },
        // fontFamily: 'Caveat',
        fontFamily: 'Kalam',
        sequence: {
          actorFontFamily: 'courier',
          noteFontFamily: 'courier',
          messageFontFamily: 'courier',
        },
        fontSize: 16,
        logLevel: 0,
      });
      function callback() {
        alert('It worked');
      }
      mermaid.parseError = function (err, hash) {
        console.error('In parse error:');
        console.error(err);
      };

      let coll = document.getElementsByClassName('collapsible');
      for (const element of coll) {
        element.addEventListener('click', function () {
          this.classList.toggle('active');
          let content = this.nextElementSibling;
          if (content.style.maxHeight) {
            content.style.maxHeight = null;
          } else {
            content.style.maxHeight = content.scrollHeight + 'px';
          }
        });
      }
    </script>
  </body>
</html>
